<template>
  <div class="home-container">
    <div class="top"></div>
    <div class="login-form">
      <div class="decoration">
        <div class="tou"></div>
        <div class="hand-left"></div>
        <div class="hand-right"></div>
      </div>
      <div class="title">欢迎登录</div>
      <el-form
        label-width="80px"
        :model="loginForm"
        ref="loginFormRef"
        :rules="loginFormRules"
      >
        <el-form-item label="用户名">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入帐号/手机号/邮箱"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input
            v-model="loginForm.password"
            :type="passwordType == true ? 'password' : 'text'"
          >
            <i
              slot="suffix"
              class="iconfont"
              :class="
                passwordType == true
                  ? 'icon-yanjing_yincang_o'
                  : 'icon-yanjing_xianshi_o'
              "
              @click="onSee"
            ></i>
          </el-input>
        </el-form-item>
        <el-button
          type="primary"
          class="btn-blue"
          @click="submitForm('loginFormRef')"
          >立即登录</el-button
        >
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginFormRules: {
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '密码的长度应为3-10个字符'
          }
        ],
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ]
      },
      passwordType: true
    }
  },
  created () {},
  computed: {},
  methods: {
    async submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 解构赋值 await async化简promise
          const { data: res } = await this.$http.post(
            '/user/login',
            this.loginForm
          )
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message.success('登录成功！')
          localStorage.setItem('Authorization', res.token)
          this.$router.push('/home')
        }
      })
    },
    // 修改密码是否
    onSee () {
      this.passwordType = !this.passwordType
    }
  }
}
</script>
<style lang="less" scoped>
.home-container {
  width: 100%;
  height: 100%;
  // background-image: url(../assets/bg-login.png);
  // background-size: 100% 100%;
  position: relative;
  .top {
    background: #0051c8;
    width: 100%;
    height: 400px;
  }
  .login-form {
    position: absolute;
    top: 25%;
    left: 37%;
    width: 25%;
    height: 400px;
    padding: 0 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // border: 1px solid red;
    background: #f9f9f9;
    border-radius: 16px;
    box-shadow: 0px 0px 5px #eee;
    .decoration {
      width: 165px;
      height: 96px;
      position: absolute;
      top: -86px;
      .tou {
        background-image: url("../assets/tou.png");
        width: 97px;
        height: 92px;
        position: absolute;
        top: 1px;
        left: 32px;
      }
      .hand-left {
        background-image: url("../assets/hand.png");
        width: 30px;
        height: 20px;
        position: absolute;
        top: 75px;
        left: -17px;
      }
      .hand-right {
        background-image: url("../assets/hand.png");
        width: 30px;
        height: 20px;
        position: absolute;
        top: 75px;
        right: -10px;
      }
    }
    .title {
      font-family: bigtitle;
      color: #0051c8;
      font-size: 32px;
      margin-bottom: 50px;
    }
    .el-form {
      // height: 100%;
      width: 100%;
      // border: 1px solid red;
    }
    .el-form-item {
      margin-bottom: 50px;
    }
    .btn-blue {
      width: calc(100% - 40px);
      margin-left: 40px;
    }
  }
}
</style>
